<template>
    <div>

        <!-- <div class="fixed  top-50% left-50% w-[300px] h-[360px] bg-#FFF ml-[-150px] z-10 mt-[-180px] flex flex-col justify-center items-center rounded-10px">
            <div class="w-[200px] bg-[#2A82E4] h-[40px] flex items-center justify-center text-(14px #FFF) text-center rounded-[6px] cursor-pointer" @click="goView('/fillList')">填报端</div>
            <div class="w-[200px] bg-[#00BAAD] h-[40px] flex items-center justify-center text-(14px #FFF) text-center rounded-[6px] cursor-pointer mt-[40px]" @click="goView('/review')">评审端</div>
        </div> -->


        <div class='fixed inset-0 bg-[#2A82E4] flex items-center justify-center' :style="[{ background: pathName === 'review' ? COLOR2 : COLOR1 }]">
<!--            <div class="text-(#fff 16px) cursor-pointer fixed right-20px top-20px z-1" @click="router.push(pathName === 'review' ? '/login?type=fillList' : '/login?type=review')">{{ pathName === 'review' ? '填报端登录' : '管理端登录' }} →</div>-->
            <div class="w-[820px] h-[500px] bg-[#FFF] rounded-[10px] justify-between flex overflow-hidden flex items-center p-[0px_50px]">
                <img src="@img/imgs.png" alt="" class="w-[310px] h-[410px]">
                <div class="">
                    <div class='flex items-center mb-[20px]'>
                        <h3 class='text-(#2A82E4 26px)' :style="[{ color: pathName === 'review' ? COLOR2 : COLOR1 }]">信息征集平台</h3>
                        <p class='text-(#2A82E4/80 18px) pl-15px' :style="[{ color: pathName === 'review' ? COLOR2 : 'rgba(42,130,228, 0.8)' }]">{{ pathName === 'review' ? '管理端' : '填报端' }} </p>
                    </div>

                  <div v-if="route.query.type != 'review' && !isUrlCoppy ">
                    <span class='cursor-pointer text-(#ff0000)'>填报端请扫描二维码并拷贝链接！</span>
                  </div>

                    <div v-if="state.loginError && isUrlCoppy">
                         问卷已过期或不可用，<span class='cursor-pointer text-(#2a82e4)' @click="state.loginError = false">请稍后再试</span>
                    </div>

<!--                    <div v-if="route.query.type != 'review'">-->
<!--                      <span class='cursor-pointer text-(#2a82e4)'>{{ state.fromData.username }}</span> <span class='cursor-pointer text-(#808080)'>您好，请输入活动邀请码</span>-->
<!--                    </div>-->
                  <div v-if="route.query.type != 'review'">
                    <span class='cursor-pointer text-(#808080)'>您好，请输入活动邀请码</span>
                  </div>
                    <el-form :model="state.fromData" label-width="auto" style="width: 300px" :style="{opacity:state.loginError && isUrlCoppy ? 0 : 1}">
                        <el-form-item label="" v-if="route.query.type == 'review'">
                            <el-input v-model="state.fromData.username" placeholder="用户名" />
                        </el-form-item>
                        <el-form-item label="" class="mt-[10px]">
                            <el-input type="password" v-model="state.fromData.password" placeholder="邀请码" />
                            <el-input type="hidden" v-model="state.fromData.username" placeholder="用户名" :hidden="true"/>
                            <el-input type="hidden" v-model="state.fromData.qid" placeholder="问卷ID" />
                        </el-form-item>
<!--                        <div v-if="isUrlCoppy">-->
<!--                            <el-form-item label="" class="mt-[10px]" label-position="top">-->
<!--                                <el-input :hidden="true" type="text" v-model="state.fromData.qid" placeholder="邀请码" />-->
<!--                            </el-form-item>-->
<!--                        </div>-->


                        <el-form-item label="" class="mt-[40px]">
                            <el-button class=" text-[#FFF]! w-full! h-[40px]!" :style="[{ background: pathName === 'review' ? COLOR2 : COLOR1 }]" @click="loginBtn">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { reactive, watch, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import request from '@/utils/api'
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
let pathName = ref(route.query.type);

const COLOR1 = '#2A82E4'
const COLOR2 = '#00BAAD'

let isUrlCoppy = route.query?.username; //是否通过复制链接打开


watch(() => route.query.type, (val, vlas) => {
    pathName.value = val
})

const state = reactive({
    fromData: {
        username: "",
        password: "",
        qid: "",
    },
    loginError:false
})

if(isUrlCoppy){
    state.fromData.username = isUrlCoppy
    state.fromData.qid = route.query?.qid
}

const loginBtn = async () => {
    try {
        let data = state.fromData
        let resp = await request.post('admin-api/system/auth/login', data);
        console.log(resp)
        let { accessToken, refreshToken } = resp.data
        window.sessionStorage.setItem('accessToken', accessToken)
        window.sessionStorage.setItem('refreshToken', refreshToken)
        window.sessionStorage.setItem('userName', data.username)

      resp = await request.get('admin-api/system/user/profile/get', {});
      window.sessionStorage.setItem('name', resp.data.nickname)
        if (!pathName.value) {
            pathName.value = 'fillList'
        }
        if(isUrlCoppy){
            goView(`/fillInCreate?eventId=${route.query?.qid}`)
        }else{
            goView("/" + pathName.value)
        }
    } catch (error) {
      console.log(error)
        state.loginError = true;
    }
}
const goView = (pathName) => {
    window.sessionStorage.setItem('userRole', pathName)
    router.push(pathName)
}
</script>